<template>
  <div class="fold_panel">
    <m-header modile-title="折叠面板" go-back="true"></m-header>
    <div class="fold_box" v-for="(lis,index) in lists">
      <div class="fold_title" @click="selectStyle(index)">
        <div class="fold_text">
          <img v-if="index === 0" src="../image/fold-icon1.png" alt="">
          <img v-if="index === 1" src="../image/fold-icon2.png" alt="">
          <img v-if="index === 2" src="../image/fold-icon3.png" alt="">
          <span>{{lis.title}}</span>
        </div>
        <div v-show="!lis.showContent">
          <span>展开</span>
          <img src="../../../../assets/images/ic_group_folder_down.png" alt="">
        </div>
        <div v-show="lis.showContent">
          <span>收起</span>
          <img src="../../../../assets/images/ic_group_folder_up.png" alt="">
        </div>
      </div>
      <ul>
        <li v-for="(lit,indexs) in lis.childs" v-show="lis.showContent">
          <p>{{lit.content}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .fold_panel {
    width: 100%;
    padding-top: 50px;
    .fold_box {
      width: 100%;
      margin-top: 10px;
      .fold_title {
        width: 100%;
        padding: 20px 10px;
        background: #ffffff;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        .fold_text{
          img{
            width: 40px;
          }
          span {
            font-size: 15px;
            padding-left: 10px;
          }
        }
        div {
          span {
            font-size: 14px;
          }
          img {
            width: 20px;
            margin-right: 10px;
          }
        }
      }
      ul {
        width: 100%;
        padding: 0;
        li {
          height: 50px;
          border-bottom: 1px solid #ffffff;
          p {
            font-size: 14px;
            float: left;
            padding-left: 10px;
            line-height: 50px;
          }
        }
        li:last-child{
          border-bottom: none;
        }
      }
    }
  }
</style>
<script>
  import myTree from '../../../../components/common/treeMenu'
  import mHeader from '../../../../components/header'

  export default {
    components: {
      myTree,
      mHeader
    },
    data() {
      return {
        lists: [],
        downIcon: true,
      }
    },
    created() {
      this.getlistDate()
    },
    methods: {
      selectStyle(index) {
        // console.log(this.lists[index].showContent)
        this.downIcon = !this.downIcon
        // 用于判断每个折叠模块下的内容是否展示
        this.lists[index].showContent = !this.lists[index].showContent
      },
      getlistDate() {
        this.$http.get('../static/fold.json').then(res => {
          if (res.status === 200) {
            this.lists = res.data
            // console.log(this.lists)
          }
        })
      }
    }
  }
</script>
